<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .loading{
           display:none;
       }
    </style>
</head>
<body>
    <div class="btn">
        <button data-index="1">第1篇</button>
        <button data-index="2">第2篇</button>
        <button data-index="3">第3篇</button>
        <button data-index="4">第4篇</button>
        <button data-index="5">第5篇</button>
        <button data-index="6">第6篇</button>
    </div>
    <div class="loading">正在加载</div>
    <div class="article" id="#article">
        <h3></h3>
        <p>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </p>
        <img src="" alt="">
        <audio controls src=""></audio>
        <div></div>
    </div>
    <!-- <script src="ejs.js"></script>
    <script src="text/template">
       
    </script> -->
    <script src="jquery-1.12.4.js"></script>
    <script>
       $(function(){
            $(".btn").on("click","button",function(){
              var index=$(this).data("index");
              console.log(index);
              $.ajax=({
                  url:"http://localhost/article_list/SelectAtricleById.php",
                  type:"GET",
                  data:{id:index},
                  dataType:"JSON",
                  beforeSend:function(){
                      $(".loading").css("display","block");
                      console.log(43);
                  },
                //   contentType:'application/x-www-form-urlencoded; charset=UTF-8',
                  complete:function(a,b){
                    $(".loading").css("display","none");
                    console.log(b);
                  },
                  success:function(data){
                     console.log(data);
                  }
      
              });
           });
       });
      
    </script>
</body>
</html>